<template>
    <div class="model-item" @click="click">
        <div class="mode-item-data-item">
            <div class="mode-item-item-in">
                <div class="mode-item-pic-type">
                    <img
                        src="~/assets/images/index/model_pdf.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'PDF'"
                    />

                    <img
                        src="~/assets/images/index/model_word.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'WORD'"
                    />

                    <img
                        src="~/assets/images/index/model_excel.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'EXCEL'"
                    />
                    <img
                        src="~/assets/images/index/model_ppt.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'PPT'"
                    />
                    <img
                        src="~/assets/images/index/model_zips.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'ZIP'"
                    />
                </div>
                <nuxt-link
                    :to="'/templates/' + item.id + '.html'"
                    target="_blank"
                    class="mode-item-title_in ellipsis"
                >
                    {{ item.title }}
                </nuxt-link>
                <div class="mode-item-line_in"></div>

                <div class="mode-item-source ellipsis2">
                    {{ item.abstract }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "modelItem",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            nameColr: false,
            appShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
        }),
    },
    mounted() {},
    methods: {
        click() {
            this.$emit("click", this.item);
        },

        showItem_inClass(type) {
            //内部背景
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipBg-in";
                    break;
                case "WORD":
                    color = "cZipBg-in";
                    break;
                case "EXCEL":
                    color = "cZipBg-in";
                    break;
                case "PPT":
                    color = "cZipBg-in";
                    break;
                case "PDF":
                    color = "cZipBg-in";
                    break;
            }
            return color;
        },

        showLine_inClass(type) {
            //内部横线
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipline-in";
                    break;
                case "WORD":
                    color = "cWordline-in";
                    break;
                case "EXCEL":
                    color = "cExcelline-in";
                    break;
                case "PPT":
                    color = "cPPTline-in";
                    break;
                case "PDF":
                    color = "cPDFline-in";
                    break;
            }
            return color;
        },

        showSourceClass(type) {
            //来源字体
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipSource";
                    break;
                case "WORD":
                    color = "cWordSource";
                    break;
                case "EXCEL":
                    color = "cExcelSource";
                    break;
                case "PPT":
                    color = "cPPTSource";
                    break;
                case "PDF":
                    color = "cPDFSource";
                    break;
            }
            return color;
        },
    },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1999px) {
    .model-item {
        padding-top: 13px;
    }
    .mode-item-data-item {
        width: 268px !important;
        height: 285px !important;
    }
    .mode-item-pic-type {
        width: 66px !important;
        height: 73px !important;
        margin: 41px auto 0 !important;
    }
    .mode-item-title_in {
        margin-top: 27px !important;
        width: 220px !important;
        font-size: 18px !important;
    }
    .mode-item-line_in {
        margin-top: 20px !important;
        width: 249px !important;
    }
    .mode-item-source {
        margin-top: 15px !important;
        padding: 0 27px !important;
    }
}
.model-item {
    // margin-top: 20px;
    &:hover .mode-item-data-item {
        box-shadow: 0px 3px 10px 0px rgba(28, 135, 243, 0.4);
        border: 1px solid #1c87f3;
    }
}
.mode-item-data-item {
    width: 324px;
    height: 344px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ffffff;
}

.mode-item-item-in {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 10px;
}

.mode-item-title_in {
    text-align: center;
    margin: 0 auto;
    margin-top: 37px;
    width: 250px;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    display: block;
    &:hover{
        text-decoration: underline;
    }
}

.mode-item-line_in {
    margin: 0 auto;
    margin-top: 26px;
    width: 300px;
    height: 1px;
    background: #f4f4f4;
}

.mode-item-source {
    margin-top: 24px;
    padding: 0 32px;
    font-weight: 400;
    font-size: 16px;
    color: #999999;
    line-height: 28px;
}

.mode-item-pic-type {
    margin: 49px auto 0;
    width: 80px;
    height: 80px;
}

@import url("~/assets/static/reset.css");
</style>
<style scoped>
/* zip样式 */
.cZipBg {
    background: #f6eeff;
}

.cZipBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cZipTitle-in {
    color: #a27ac8;
}

.cZipline-in {
    background: #e6d4f7;
}

.cZipSource {
    color: #e6cefd;
}

/* Word样式 */
.cWordBg {
    background: #d8efff;
}

.cWordBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cWordTitle-in {
    color: #478ac0;
}

.cWordline-in {
    background: #c4e0ff;
}

.cWordSource {
    color: #accce6;
}

/* Excel样式 */
.cExcelBg {
    background: #def4ed;
}

.cExcelBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cExcelTitle-in {
    color: #58a982;
}

.cExcelline-in {
    background: #c5ecc4;
}

.cExcelSource {
    color: #b6e2cc;
}

/* PPT样式 */
.cPPTBg {
    background: #ffeee1;
}

.cPPTBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cPPTTitle-in {
    color: #ee9d4c;
}

.cPPTline-in {
    background: #f7d9bb;
}

.cPPTSource {
    color: #fadabb;
}

/* PDF样式 */
.cPDFBg {
    background: #ffeae9;
}

.cPDFBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cPDFTitle-in {
    color: #dc706e;
}

.cPDFline-in {
    background: #ffdad9;
}

.cPDFSource {
    color: #ffcac8;
}
</style>
